<template>
	<view>
		<!-- 勿删! 用于处理 IOS bug ，频繁触发视图渲染解决同层渲染bug -->
		<!-- controls 若为 true 可删 -->
		<!-- <view :style="{display:updateView ? 'block' : 'none'}" /> -->

		<view class="sv-item">
			<video class="sv-video" :src="showList.url" :show-fullscreen-btn="false" :loop="true" :autoplay="true"
				:show-play-btn="false" :controls="false" :enable-progress-gesture="true" />

			<!-- 内容区域 -->
			<block v-if="showList.index != -1">
				<operation :itemInfo.sync="showList" :canward="canward" />
				<view class="content-ne">
					<view class="store cross-center" v-if="showList.goodslist.vdian_url != ''"
						@click="jump(showList.goodslist.vdian_url,showList.id)">
						<image :src="showList.user.userInfo.avatar" mode=""></image>
						<view class="u-line-1" style="max-width: 520rpx;">
							{{showList.user.nickname}} 的珠宝店
						</view>
					</view>
					<view class="commodity" v-if="showList.goodslist.goodlist.length > 0">
						<swiper autoplay class="swiper" interval="3000" circular next-margin="90rpx" disable-touch>
							<swiper-item v-for="(it,idx) in showList.goodslist.goodlist" v-if="it.length != 0"
								:key="idx" @click="shopDetail(it,showList.id)">
								<view class="item-good dir-left-nowrap">
									<view class="image-view cover-pic">
										<image class="img" :src="it.cover_pic"></image>
										<view class="no-goods" v-if="it.goods_stock == 0">
											已售
										</view>
									</view>
									<view class="content dir-top-nowrap main-between">
										<view class="name t-omit-two">{{it.name}}</view>
										<view class="pri-but dir-left-nowrap main-between cross-bottom">
											<view class="pri">
												<text class="price"
													:class="sign === 'gift' ? theme + '-color '+ theme : getTheme + '-m-text '+ getTheme">定金￥{{it.price}}</text>
												<view class="subtitle">去实体店体验</view>
											</view>
											<view class="button" v-if="it.goods_stock == 0">已售</view>
											<view class="button" @click="shopDetail(it,showList.id)" v-else>查看详情
											</view>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>

					<view class="debug" @click="openall" v-if="!openit">
						<view v-if="showList.catetitle != null">{{showList.catetitle}}</view>
						<view v-if="showList.title != ''">{{showList.title}}</view>
						<view class="u-line-2">{{showList.describe}}</view>
					</view>
					<view class="nodebug" @click="putall" @touchmove.stop.prevent="moveStop" v-else>
						<view v-if="showList.catetitle != null">{{showList.catetitle}}</view>
						<view v-if="showList.title != ''">{{showList.title}}</view>
						<view @touchstart="touchtext">{{showList.describe}}
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import utils from './utils.js';
	import operation from './components/operation.vue';
	let mallurl = null
	export default {
		components: {
			operation
		},
		data() {
			return {
				showList: '', // 当前显示的列表
				videoid: 0,

				reqLock: false, // 请求锁
				// updateView: true, // ios bug
				page: 1,
				limit: 10,
				illheight: 0,
				befheight: 0,
				openit: false,

				title: '',
				transmit_id: null,

				canward: false,
				mall_id: 1
			}
		},
		onLoad: function(option) {
			if (option.transmit_id) {
				this.transmit_id = option.transmit_id
			}
			this.openit = false
			// 带参跳转
			if (option.id) {
				this.videoid = option.id;
			}
			if (option.title) {
				this.title = option.title;
			}
			this.mall_id = options.mall_id || 1
			mallurl = this.$siteInfo.apiroot + '?_mall_id=' + this.mall_id + '&r='
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
		},
		onHide() {
			this.openit = false
		},
		onReady() {
			this.getList();
			// this.disposeIosBug();
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
		},
		methods: {
			openall() {
				this.openit = true
				uni.createAnimation()
			},
			putall() {
				this.openit = false
			},
			viewfull() {
				this.openit = !this.openit
			},
			touchtext() {},

			shopDetail(item, videoid) {
				if (item.goods_stock != 0) {
					this.$storage.setStorageSync('hivideoid', videoid)
					uni.navigateTo({
						url: '/plugins/mch/goods/goods?id=' + item.id + '&mch_id=' + item.mch_id + '&videoid=' +
							videoid + '&mall_id=' + this.mall_id
					})
				}
			},
			jump(item, id) {
				this.$storage.setStorageSync('hivideoid', id)
				uni.navigateTo({
					url: item
				})
			},
			// 处理 IOS controls为false情况下 同层渲染bug代码
			disposeIosBug() {
				setInterval(() => {
					this.updateView = false;
					this.$nextTick(() => {
						this.updateView = true;
					});
				}, 100);
			},
			// （防抖）获取数据列表
			getList(id) {
				// 请求数据
				let qdata = {
					page: this.page,
					page_size: this.limit,
					id: this.videoid,
					// review_status: 1
				}

				// 请求接口
				this.$request({
					url: mallurl + this.$apiUrl.sixty.videolist,
					data: qdata,
				}).then((res) => {
					if (res.code == 0) {
						if (res.data.current.review_status != 1) {
							this.canward = true
						}
						this.showList = res.data.current
						uni.setNavigationBarTitle({
							title: res.data.current.describe
						})
						// 点赞
						let like = false
						if (this.showList.otherdata.is_likes_video == 0) {
							like = false
						} else if (this.showList.otherdata.is_likes_video == 1) {
							like = true
						}
						// 关注
						let follow = false
						if (this.showList.otherdata.is_focus_video == 0) {
							follow = false
						} else if (this.showList.otherdata.is_focus_video == 1) {
							follow = true
						}
						// 收藏
						let star = false
						if (this.showList.otherdata.is_favorite_video == 0) {
							star = false
						} else if (this.showList.otherdata.is_favorite_video == 1) {
							star = true
						}
						this.$set(this.showList, 'like', like);
						this.$set(this.showList, 'follow', follow);
						this.$set(this.showList, 'star', star);
						this.$set(this.showList, 'videoLikesNums', this.showList.otherdata
							.videoLikesNums);
						this.$set(this.showList, 'commentNum', this.showList.otherdata
							.videoCommentsNums);
						this.$set(this.showList, 'videoColsNums', this.showList.otherdata
							.videoFavoriteNums);
						this.$set(this.showList, 'forwardNums', this.showList.otherdata.follow_num);
					}
				}).catch(err => {
					if (err.msg) {
						uni.showToast({
							icon: 'none',
							title: err.msg
						})
					}
					// console.log(err);
				})
			},
			moveStop() {}
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				title: this.title != '' ? this.title : this
					.describe,
				path: '/plugins/sixty/fullscreen/editdex',
				params: {
					transmit_id: this.userInfo.options.user_id,
					id: this.videoid,
					mall_id: this.mall_id
				}
			});
		},
		onShareTimeline() {
			return this.$shareTimeline({
				title: this.title != '' ? this.title : this
					.describe,
				query: {
					transmit_id: this.userInfo.options.user_id,
					id: this.videoid,
					mall_id: this.mall_id
				}
			});
		},
	}
</script>

<style>
	page {
		background-color: #000;
	}
</style>

<style lang="scss" scoped>
	.debug {
		/* position: absolute;
		left: 50rpx;
		bottom: 156rpx; */
		font-size: 28rpx;
		color: #fff;
		width: 86%;
		max-height: 150rpx;
		overflow: hidden;
		// padding: 24rpx 0;
		padding: 24rpx 50rpx 150rpx;

		.lookat {
			font-size: 24rpx;
		}
	}

	.nodebug {
		/* position: absolute;
		left: 0;
		bottom: 0; */
		max-height: 760rpx;
		border-radius: 54rpx 54rpx 0 0;
		font-size: 28rpx;
		text-align: justify;
		color: #fff;
		width: 100%;
		// padding: 24rpx 0;
		padding: 24rpx 50rpx 150rpx;
		margin-top: 24rpx;
		background-color: rgba(0, 0, 0, 0.7);
		overflow-y: scroll;
	}

	.store {
		/* position: absolute;
		left: 50rpx;
		bottom: 300rpx;
		width: 300rpx; */
		max-width: 620rpx;
		width: max-content;
		height: 60rpx;
		background-color: rgba(0, 0, 0, 0.7);
		// background-color: #000;
		color: #fff;
		border-radius: #{120upx};
		// padding: #{0 25upx};
		margin: 0 50rpx;

		image {
			border-radius: 50%;
			width: 50rpx;
			height: 50rpx;
		}

		view {
			font-size: 24rpx;
			padding: 0 24rpx;
		}
	}

	.content-ne {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
	}

	.commodity {
		width: 86%;
		height: 170rpx;
		// background: #FFFFFF;
		color: #353553;
		margin: 20rpx 50rpx 0;

		.sc-z {
			display: inline-flex;
			height: 170rpx;

			.item-good {
				width: 540rpx;
				margin-right: 20rpx;
				background-color: #ffffff;
				border-radius: #{16upx};
				padding: #{0 25upx};
				padding-top: #{25upx};
				overflow: hidden;
				border-top: 1rpx solid #e0e0e0;

				&:first-child {
					border-top: none;
				}

				.image-view {

					position: relative;

					/* >view {
						width: #{150upx};
						height: #{30upx};
						line-height: #{30upx};
						position: absolute;
						bottom: 0;
						font-size: #{18upx};
						color: #ffffff;
						text-align: center;
						background: linear-gradient(to left, #ffcb00, #ff9600);
					} */
				}
			}

			.cover-pic {
				width: #{150upx};
				height: #{150upx};
				position: relative;

				.img {
					width: 120rpx;
					height: 120rpx;
				}

				.no-goods {
					position: absolute;
					top: 0;
					left: 0;
					width: 120rpx;
					height: 120rpx;
					background-color: rgba(0, 0, 0, 0.3);
					margin: 0 auto;
					font-size: 36rpx;
					text-align: center;
					line-height: 120rpx;
					color: #FFFFFF;
					font-weight: bold;
				}
			}

			.content {
				width: calc(100% - #{120upx});
				min-height: #{120upx};
				margin-bottom: #{25upx};
				padding-left: #{25upx};
			}

			.name {
				line-height: #{32upx};
				font-size: #{24upx};
				color: #303030;
				// margin-top: #{8upx};
			}

			.pri-but {

				>.button {
					border-radius: 70rpx;
					font-size: 24rpx;
					font-weight: 100;
					border: 2rpx solid #e59c26;
					padding: 10rpx 20rpx;
				}

				.pri {
					line-height: #{21upx};
					// margin-top: #{9upx};
				}

				.price {
					font-size: #{21upx};
					line-height: 1;
				}

				.original {
					font-size: #{21upx};
					line-height: 1;
					margin-left: #{15upx};
				}

				.subtitle {
					margin: 8rpx 0;
					font-size: 20rpx;
					color: rgba(0, 0, 0, 0.8);
					font-weight: 600;
				}
			}

			.member-price {
				margin-right: #{12upx};
			}
		}

		.swiper {
			height: 170rpx;

			// swiper-item {
			// 	background: #fff;
			// 	border-radius: 16rpx;
			// }

			.item-good {
				width: 540rpx;
				height: 100%;
				margin-right: 20rpx;
				background-color: #ffffff;
				border-radius: #{16upx};
				padding: #{0 25upx};
				padding-top: #{25upx};
				overflow: hidden;
				border-top: 1rpx solid #e0e0e0;

				&:first-child {
					border-top: none;
				}

				.image-view {

					position: relative;

					/* >view {
							width: #{150upx};
							height: #{30upx};
							line-height: #{30upx};
							position: absolute;
							bottom: 0;
							font-size: #{18upx};
							color: #ffffff;
							text-align: center;
							background: linear-gradient(to left, #ffcb00, #ff9600);
						} */
				}
			}

			.cover-pic {
				width: #{150upx};
				height: #{150upx};
				position: relative;

				.img {
					width: 120rpx;
					height: 120rpx;
				}

				.no-goods {
					position: absolute;
					top: 0;
					left: 0;
					width: 120rpx;
					height: 120rpx;
					background-color: rgba(0, 0, 0, 0.3);
					margin: 0 auto;
					font-size: 36rpx;
					text-align: center;
					line-height: 120rpx;
					color: #FFFFFF;
					font-weight: bold;
				}
			}

			.content {
				width: calc(100% - #{120upx});
				min-height: #{120upx};
				margin-bottom: #{25upx};
				padding-left: #{25upx};
			}

			.name {
				line-height: #{32upx};
				font-size: #{24upx};
				color: #303030;
				// margin-top: #{8upx};
			}

			.pri-but {

				>.button {
					border-radius: 70rpx;
					font-size: 24rpx;
					font-weight: 100;
					border: 2rpx solid #e59c26;
					padding: 10rpx 20rpx;
				}

				.pri {
					line-height: #{21upx};
					// margin-top: #{9upx};
				}

				.price {
					font-size: #{21upx};
					line-height: 1;
				}

				.original {
					font-size: #{21upx};
					line-height: 1;
					margin-left: #{15upx};
				}

				.subtitle {
					margin: 8rpx 0;
					font-size: 20rpx;
					color: rgba(0, 0, 0, 0.8);
					font-weight: 600;
				}
			}

			.member-price {
				margin-right: #{12upx};
			}
		}
	}

	.sv-item,
	.sv-swiper,
	.sv-video {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	.sv-play {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: .8;
		pointer-events: none;
		width: 100rpx;
	}

	.navbar {
		position: fixed;
		top: 0;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		z-index: 99;
	}
</style>
